<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智能反馈系统 - 创新JSP页面</title>
	<link rel="stylesheet" href="../css/style.css">
	<div>
		<div class="nav-container">
			<%-- 导航链接部分 有首页，微课程，关于我们，教师或学生登录，教师或学生注册，讯息功能--%>
			<div class="nav-links">
				<a href="teacherIndex.jsp" class="nav-link">首页</a>
				<a href="./teacherNews.jsp" class="nav-link">新闻讯息</a>
				<a href="./teacherCourses.jsp" class="nav-link">微课程</a> <!-- 修改链接指向微课程页面 -->
				<a href="./teacherAbout.jsp" class="nav-link">关于我们</a>
				<a href="./teacherFeedback.jsp" class="nav-link">用户反馈</a>
				<a href="innovate.jsp" class="nav-link">创新点</a>
				<a href="techersBackstage.jsp" class="nav-link">我的后台</a>
				<a href="../index.jsp" class="nav-link">退出登录</a>&nbsp;&nbsp;
			</div>
			<style>
                /* 全局设置 */
                :root {
                    --primary-color: #3498db;
                    --secondary-color: #2ecc71;
                    --accent-color: #f39c12;
                    --danger-color: #e74c3c;
                    --light-bg: #f8f9fa;
                    --dark-text: #333;
                    --light-text: #fff;
                    --border-radius: 8px;
                    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                    --transition-time: 0.3s;
                }

                * {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }

                body {
                    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                    background-color: var(--light-bg);
                    color: var(--dark-text);
                    line-height: 1.6;
                    padding: 20px;
                }

                a {
                    text-decoration: none;
                    color: var(--primary-color);
                }

                .container {
                    max-width: 900px;
                    margin: 0 auto;
                    background: var(--light-text);
                    padding: 30px;
                    border-radius: var(--border-radius);
                    box-shadow: var(--box-shadow);
                }

                h1 {
                    color: var(--primary-color);
                    text-align: center;
                    margin-bottom: 30px;
                    font-size: 1.8rem;
                }

                .nav-links {
                    display: flex;
                    justify-content: center;
                    gap: 20px;
                    margin-bottom: 30px;
                }

                .nav-link {
                    display: inline-block;
                    padding: 10px 20px;
                    background-color: var(--primary-color);
                    color: var(--light-text);
                    border-radius: var(--border-radius);
                    transition: background-color var(--transition-time);
                }

                .nav-link:hover {
                    background-color: #258cd1;
                }

                .features {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    gap: 20px;
                    margin-bottom: 30px;
                }

                .feature-card {
                    flex: 1 1 280px;
                    min-width: 280px;
                    background: #fff;
                    padding: 20px;
                    border-radius: var(--border-radius);
                    box-shadow: var(--box-shadow);
                    text-align: center;
                    transition: transform var(--transition-time);
                }

                .feature-card:hover {
                    transform: translateY(-5px);
                }

                .feature-icon {
                    font-size: 28px;
                    margin-bottom: 10px;
                    color: var(--primary-color);
                }

                .form-group {
                    margin-bottom: 20px;
                }

                label {
                    display: block;
                    margin-bottom: 8px;
                    font-weight: bold;
                    color: var(--dark-text);
                }

                input[type="text"],
                select,
                textarea {
                    width: 100%;
                    padding: 12px;
                    border: 1px solid #ddd;
                    border-radius: var(--border-radius);
                    font-size: 16px;
                    transition: border-color var(--transition-time);
                }

                input[type="text"]:focus,
                textarea:focus {
                    outline: none;
                    border-color: var(--primary-color);
                    box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
                }

                textarea {
                    min-height: 120px;
                    resize: vertical;
                }

                button {
                    background-color: var(--primary-color);
                    color: var(--light-text);
                    border: none;
                    padding: 12px 20px;
                    border-radius: var(--border-radius);
                    cursor: pointer;
                    font-size: 16px;
                    transition: background-color var(--transition-time);
                }

                button:hover {
                    background-color: #258cd1;
                }

                .voice-btn {
                    background-color: var(--secondary-color);
                    margin-left: 10px;
                    padding: 10px 16px;
                }

                .voice-btn:hover {
                    background-color: #219150;
                }

                .ai-suggestions {
                    margin-top: 10px;
                    padding: 15px;
                    background-color: var(--light-bg);
                    border-radius: var(--border-radius);
                    border-left: 4px solid var(--primary-color);
                }

                .suggestion {
                    margin: 5px 0;
                    cursor: pointer;
                    color: var(--primary-color);
                    transition: color var(--transition-time);
                }

                .suggestion:hover {
                    color: #1a6eb5;
                    text-decoration: underline;
                }

                #feedbackHistory {
                    margin-top: 40px;
                }

                #historyContent > div {
                    margin-bottom: 15px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid #eee;
                }

                #historyContent > div:last-child {
                    margin-bottom: 0;
                    border-bottom: none;
                }
			</style>

			<body>

			<!-- 导航链接 -->


			<div class="container">

				<h1>智能反馈系统</h1>
				<a href="folder.jsp" class="nav-link">文件分类器</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="TaskManager.jsp" class="nav-link">AI任务管理工具</a>
				<!-- 创新功能展示区 -->
				<div class="features">
					<div class="feature-card">
						<div class="feature-icon">🤖</div>
						<h3>AI智能建议</h3>
						<p>实时分析您的输入并提供智能建议</p>
					</div>
					<div class="feature-card">
						<div class="feature-icon">⚡</div>
						<h3>动态加载</h3>
						<p>内容更新无需页面刷新</p>
					</div>
					<div class="feature-card">
						<div class="feature-icon">🎤</div>
						<h3>语音输入</h3>
						<p>支持语音输入内容</p>
					</div>
				</div>

				<form id="feedbackForm" action="ProcessFeedback" method="post">
					<div class="form-group">
						<label for="name">您的姓名</label>
						<input type="text" id="name" name="name" placeholder="请输入您的姓名">
					</div>

					<div class="form-group">
						<label for="email">电子邮箱</label>
						<input type="text" id="email" name="email" placeholder="请输入您的邮箱">
					</div>

					<div class="form-group">
						<label for="feedbackType">反馈类型</label>
						<select id="feedbackType" name="feedbackType">
							<option value="suggestion">建议</option>
							<option value="bug">错误报告</option>
							<option value="compliment">表扬</option>
							<option value="other">其他</option>
						</select>
					</div>

					<div class="form-group">
						<label for="message">反馈内容
							<button type="button" id="voiceInputBtn" class="voice-btn">🎤 语音输入</button>
						</label>
						<textarea id="message" name="message" placeholder="请详细描述您的反馈"></textarea>

						<!-- 创新点1: AI辅助建议区域 -->
						<div id="aiSuggestions" class="ai-suggestions" style="display:none;">
							<h4>AI建议:</h4>
							<div id="suggestionsList"></div>
						</div>
					</div>

					<button type="submit">提交反馈</button>
				</form>

				<!-- 创新点2: 动态加载的反馈历史 -->
				<div id="feedbackHistory">
					<h2>最近的反馈</h2>
					<div id="historyContent">
						<p>正在加载反馈历史...</p>
					</div>
				</div>
			</div>

			<script>
                // 创新点1: 实时AI辅助建议
                document.getElementById('message').addEventListener('input', function() {
                    const message = this.value;
                    if (message.length > 10) {
                        setTimeout(() => {
                            const suggestions = generateAISuggestions(message);
                            displaySuggestions(suggestions);
                        }, 500);
                    } else {
                        document.getElementById('aiSuggestions').style.display = 'none';
                    }
                });

                function generateAISuggestions(text) {
                    const suggestions = [];

                    if (text.includes('问题')) {
                        suggestions.push("您可以更详细描述遇到的问题吗？包括出现的步骤和环境。");
                    }

                    if (text.includes('建议')) {
                        suggestions.push("感谢您的建议！您能说明这个改进会如何帮助您吗？");
                    }

                    if (text.length < 50) {
                        suggestions.push("您的描述似乎有点简短，添加更多细节会帮助我们更好地理解。");
                    }

                    if (suggestions.length === 0) {
                        suggestions.push("您的反馈很清晰！是否需要添加任何截图或示例来进一步说明？");
                    }

                    return suggestions;
                }

                function displaySuggestions(suggestions) {
                    const container = document.getElementById('aiSuggestions');
                    const list = document.getElementById('suggestionsList');

                    list.innerHTML = '';
                    suggestions.forEach(suggestion => {
                        const div = document.createElement('div');
                        div.className = 'suggestion';
                        div.textContent = suggestion;
                        div.onclick = function() {
                            document.getElementById('message').value += ' ' + suggestion;
                        };
                        list.appendChild(div);
                    });

                    container.style.display = 'block';
                }

                // 创新点2: 动态加载反馈历史
                window.addEventListener('load', function() {
                    loadFeedbackHistory();
                });

                function loadFeedbackHistory() {
                    setTimeout(() => {
                        const historyContent = document.getElementById('historyContent');
                        historyContent.innerHTML = `
                    <div>
                        <strong>张三</strong> - <em>建议</em> - <small>2023-05-15</small>
                        <p>希望能增加夜间模式功能。</p>
                    </div>
                    <div>
                        <strong>李四</strong> - <em>错误报告</em> - <small>2023-05-14</small>
                        <p>在移动设备上提交表单时按钮显示不正常。</p>
                    </div>
                    <div>
                        <strong>王五</strong> - <em>表扬</em> - <small>2023-05-12</small>
                        <p>非常喜欢这个新设计，使用起来很流畅！</p>
                    </div>
                `;
                    }, 1000);
                }

                // 创新点3: 语音输入支持
                document.getElementById('voiceInputBtn').addEventListener('click', function() {
                    if (!('webkitSpeechRecognition' in window)) {
                        alert("您的浏览器不支持语音识别功能，请使用Chrome或Edge浏览器。");
                        return;
                    }

                    const recognition = new webkitSpeechRecognition();
                    recognition.lang = 'zh-CN';
                    recognition.interimResults = false;

                    recognition.onstart = function() {
                        document.getElementById('voiceInputBtn').textContent = '正在聆听...';
                        document.getElementById('voiceInputBtn').style.backgroundColor = '#d94f3f';
                    };

                    recognition.onresult = function(event) {
                        const transcript = event.results[0][0].transcript;
                        document.getElementById('message').value += ' ' + transcript;
                    };

                    recognition.onerror = function(event) {
                        console.error('语音识别错误:', event.error);
                    };

                    recognition.onend = function() {
                        document.getElementById('voiceInputBtn').textContent = '🎤 语音输入';
                        document.getElementById('voiceInputBtn').style.backgroundColor = '#2ecc71';
                    };

                    recognition.start();
                });
			</script>

			</body>
</html>
